<template>
	<view id="login">
		<!-- 基础登录页 -->
		<Initial />

		<!-- 注册页 -->
		<Registry v-if="loginStore.isRegistry" />

		<!-- 验证码 -->
		<validateCode v-if="loginStore.isValidateCode" />
	</view>
</template>

<script lang="ts" setup>
// loginStore
import useLoginStore from '@/stores/login';
// login组件
import Initial from './Initial.vue';
import Registry from './Registry.vue';
import validateCode from './validateCode.vue';
// login仓库
const loginStore = useLoginStore();
</script>

<style lang="scss" scoped>
#login {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100vw;
	height: 100vh;
	padding: $loginBoxPadding;
	box-sizing: border-box;

	background-image: url('@/static/images/login.jpeg');
	background-size: cover;
	box-sizing: border-box;
	filter: saturate(70%) brightness(110%);
}
</style>
